<template>
  <div>
    <div style="border-bottom:2px solid #888;line-height:26px;">
      <strong>regex</strong> 正则匹配数据源 <strong>例样: A:乙 B:未 C:辛 D:巳 E:己 F:丑 G:壬 H:申</strong><br/>
      <strong>regex 方法匹配的时候用的是 find的模式，不是完全匹配，所以不用写完整的表达式</strong><br/>
      <strong>ik</strong> 表达式 的数据源有 <strong>五行的权重值，M值，E 的五行</strong><br/>
      <strong>ik表达式 可以不写方法名 直接 写表达式，但是正则表达式 必须 regex(表达式) 这种方式</strong><br/>
      <strong>另外提供 max,min,none,m 4个方法，数据源和 ik表达式相同<br/>
          max: max(金,木,水,火,土) <br/>
          min:同上<br/>
          none: none() 此方法返回 “请人工核实”<br/>
          m: m() 返回 命的五行<br/>
          还有一个方法：contains 数据源和 正则数据源同，比如 contains(戌) 或者 contains(戌,卯,午) 等<br/>
      </strong>

    </div>
    <div style="border-bottom:1px solid #888;">
      工具栏：<el-button @click="handleYsRuleNew" type="text" style="margin-left:40px;" size="small">新建</el-button>
    </div>
    <el-table :data="ysRules" style="width:100%;">
      <el-table-column label="M值范围" prop="mExpression"></el-table-column>
      <el-table-column label="条件表达式列表">
        <template slot-scope="scope">
          <el-table :data="scope.row.tjList">
            <el-table-column label="条件" prop="tjExpression"></el-table-column>
            <el-table-column label="用神" prop="ysExpression"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sortVal"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" @click="handleEditYsRule(scope.row)" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="用神规则编辑" :visible.sync="ysEditDialog">
      <el-form v-if="editingYsRule">
        <el-form-item label="M表达式">
          <el-input v-model="editingYsRule.mExpression"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" size="mini" v-model="editingYsRule.sortVal"></el-input>
        </el-form-item>
        <el-form-item label="用神规则">
          <el-table :data="editingYsRule.tjList">
            <el-table-column label="条件">
              <template slot-scope="scope">
                <el-input v-model="scope.row.tjExpression" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="表达式">
              <template slot-scope="scope">
                <el-input v-model="scope.row.ysExpression" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleYsItemDel(scope)" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-button @click="handleYsItemNew" type="primary" size="small">新规则</el-button>
          </div>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" @click="handleSaveRule">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    name: "ys-data",
    data(){
      return {
        ysEditDialog:false,
        ysRules:[],
        editingYsRule:null,
      }
    },
    created(){
      this.listYsRules()
    },
    methods:{
      ...mapActions({fetch:'fetch'}),
      listYsRules(){
        this.fetch({
          name:'listYsRules',
        }).then(res=>{
          this.ysRules = res
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      },
      handleYsRuleNew(e){
        this.editingYsRule = {
          mExpression:'',
          tjList:[{tjExpression:"",ysExpression:""}]
        }
        this.ysEditDialog=true
      },
      handleEditYsRule(row){
        this.editingYsRule = row
        this.ysEditDialog=true
      },
      handleYsItemDel(scope){
        this.editingYsRule.tjList.splice(scope.$index,1)
      },
      handleYsItemNew(){
        if(!this.editingYsRule.tjList) this.editingYsRule.tjList=[]
        this.editingYsRule.tjList.push({tjExpression:"",ysExpression:""})
      },
      handleSaveRule(e){
        let data = {mExpression:this.editingYsRule.mExpression,tjList:JSON.stringify(this.editingYsRule.tjList),sort:this.editingYsRule.sortVal}
        let api = "addYsRule"
        let isnew = true
        if(this.editingYsRule.id) {
          data.id = this.editingYsRule.id
          api = "updateYsRule"
          isnew = false
        }
        this.fetch({
          name:api,
          data
        }).then(res=>{
          this.ysEditDialog=false
          this.editingYsRule=null
          if(isnew)
            this.ysRules.push(res)
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
